<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>前台购物车</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../../styles/common.css" />

</head>

<body>
<!--<h1>管理员账号管理</h1>-->
<div class="app" id="app">

    <!--1.主要内容-->
    <el-container style="height: 750px; border: 1px solid #eee">
        <el-container>
            <!--个人订单信息弹框-->
                <div  v-for="option1 in options1">
                    <div  style="width: 570px;background-color: #b3e19d;margin-bottom: 20px">
                        <table border="1" cellspacing="0" style="text-align:center;width: 100%;height: 50px;background-color: red">
                            <th>菜名</th><th>图片</th><th>数量</th><th>单价</th>
                            <tr style="font-size: 15px" v-for="option2 in option1.orderDetailList">
                                <td>{{option2.name}}</td>
                                <td>
                                    <el-image
                                            style="width: 100px; height: 100px"
                                            :src=`/photos/download?name=${option2.image}`
                                    ></el-image>
                                </td>
                                <td>{{option2.number}}</td>
                                <td>{{option2.price}}</td>
                            </tr>
                        </table>

                        <div>
                            <p style="margin: 0 0 0 0px;">下单时间：{{option1.payTime}}</p>
                            <p style="margin: -20px 0 0 300px;">订单号：{{option1.orderId}}</p>
                            <p>下单时间：{{option1.payTime}}</p>
                            <p style="margin: -30px 0 0 300px;">总消费：{{option1.amount}}元</p>
                        </div>
                    </div>
                </div>


        </el-container>
    </el-container>

</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../../plugins/axios/axios.min.js"></script>


<script>


    new Vue({
        el: '#app',
        data:{

            //订单
            options1:[{}],

        },
        created() {
            // this.getAll();
        },

        methods: {
            // getAll(){
            //     parent ="?orderId="+this.orderQuery.orderId;
            //     // alert(parent)
            //     axios.get("/orders/"+this.pagination.currentPage+"/"+this.pagination.pageSize+parent).then((res)=>{
            //
            //         this.dataList=res.data.data.records
            //         this.pagination.total=res.data.data.total
            //         this.orderQuery.orderId=""
            //     })
            // },
            // //切换页码
            // handleCurrentChange(currentPage) {
            //     this.pagination.currentPage=currentPage;
            //     this.getAll();
            // },
            //
            // //删除员工
            // deleteOrders(row) {
            //
            //     this.$confirm("此操作删除当前订单信息，是否继续?","提醒",{type: 'info'
            //     }).then(()=>{
            //
            //         axios.delete("/orders/"+row.id).then((res)=>{
            //             this.$message.success(res.data.msg)
            //         })
            //     }).catch(()=>{
            //         //取消删除
            //         this.$message.info("取消删除操作")
            //     }).finally(()=>{
            //         this.getAll();
            //     })
            //
            // },



        }
    })
</script>
</body>
</html>
